<template>
	<view class="content">
		<view class="loginWrap">
			<view class="navStype">
				<view class="text">账号</view>
				<el-input type="text" placeholder="输入账号" v-model="loginForm.username"></el-input>
			</view>
			<view class="navStype">
				<view class="text">密码</view>
				<el-input type="password" placeholder="输入密码" v-model="loginForm.password"></el-input>
			</view>
			<view class="navRemindStype">
				<el-checkbox v-model="loginForm.rememberMe" style="margin-left: 0px;">记住密码</el-checkbox>
				<view class="remindView">忘记密码</view>
			</view>
			<view class="btnStyle">
				<el-button type="primary" @click="doLogin">登录</el-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginForm:{
					username: "",
					password: "",
					rememberMe: false
				},
				title: '登录'
			}
		},
		onLoad() {
			console.log("init............")
		},
		methods: {
			doLogin(){
				uni.navigateTo({
				      url: '/pages/index/index'
				});
			},

		}
	}
</script>

<style scoped>
	.content {
		background: url("/static/images/login-bg.jpg") no-repeat;
		background-size: 100vw 100vh;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.loginWrap{
		width: 28vw;
		height: 40vh;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 1vw;;
		position: absolute;
		top: 23vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.navRemindStype{
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		width: 20vw;
	}
	.navRemindStype .el-checkbox{
		width: 20vw;
	}
	.navRemindStype  /deep/ .el-checkbox__label{
		font-size: 32rpx;;
	}
	.navRemindStype .remindView{
		width: 10vw;
		color: #0A77F9;
		font-weight: 600;
		cursor: pointer;
		text-align: right;
	}
	.navStype .text{
		margin: 20rpx 0rpx;
		font-size: 46rpx;
		font-weight: 600;
	}
	.navStype .el-input{
		width: 20vw;
		font-size: 32rpx;
	}
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.btnStyle{
		margin-top: 20rpx;
	}
	.btnStyle .el-button{
		width: 20vw;
	}
</style>
